<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">
    <script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
    <script th:src="@{|/jquery/jquery.md5.js|}"></script>
    <script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{../script/docs.min.js}"></script>
    <script th:src="@{../layer/layer.js}"></script>
    <style>

        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {background: #F4F4F4;}
        table tbody td:nth-child(even) {color: #C00;}
        .myModal-input{
            width: 200px;
            line-height: 30px;
            display: inline;
        }
        .modal-header{
            background-color: #dca7a7;
        }
        .modal-dialog{
            width:500px;
        }
        .close{
            background-color: red;
        }
        label{
            display: inline-block;
            min-width: 70px;/*或者 width: 100px;*/
        }
    </style>
</head>

<body>


<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <!--   从数据库中查询出所有的work 需要加班中的申请人信息-->
                        <div class="form-group ">
                            <label>值班姓名</label>
                            <select name="uid" id="uid" class="form-control" placeholder="请选择老师">
                                <option value="">请选择姓名</option>
                                <option th:each="user,sta:${userList}" th:text="${user.uname}"
                                        th:value="${user.uid}">
                                </option>
                            </select>
                        </div>
                        <div class="form-group ">
                            <label>是否填写值班记录</label>
                            <select name="logstate" id="logstate" class="form-control" placeholder="值班状态">
                                <option value="">是否记录</option>
                                <option value="1">已记录</option>
                                <option value="0">未记录</option>
                            </select>
                        </div>
                        <button type="button" class="btn btn-warning" id="btnSearch"><i
                                class="glyphicon glyphicon-search"></i> 查询
                        </button>
                        <button type="button" class="btn btn-success" id="btnSearchByuid"><i
                                class="glyphicon glyphicon-star"></i> 我的值班
                        </button>
                    </form>
                    &nbsp;&nbsp;&nbsp;
<!--                    <button type="button" class="btn btn-success" id="btnSearchByuid"><i-->
<!--                            class="glyphicon glyphicon-star"></i> 我的值班-->
<!--                    </button>-->
                    <!--     新增值班按钮               -->
                    <button type="button" class="btn btn-primary" style="float:right;" data-toggle="modal" data-target="#myModal5"><i class="glyphicon glyphicon-plus"></i> 安排值班</button>

                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">NO.</th>
                                <th>值班人</th>
                                <th>值班日期</th>
                                <th>指定人</th>
                                <th>开始时间</th>
                                <th>时长</th>
                                <th>值班日志</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">

                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="8" align="center">
                                    <ul class="pagination" id="byPage">

                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <!-- 模态框（Modal）新增值班信息-->
            <form id="dutyAddForm" enctype="multipart/form-data">
                <div class="modal fade myModel" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="myModalLabel5">值班安排</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label >姓名：</label>
                                    <select name="uid"  class="form-control myModal-input" placeholder="请选择">
                                        <option value="">请选择姓名</option>
                                        <option th:each="user,sta:${userList}" th:text="${user.uname}"
                                                th:value="${user.uid}">
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group" id="datetime">
                                    <label for="ddate">值班日期:</label>
                                    <input type="date" name="PJddate" id="PJddate" class="form-control myModal-input">
                                    <input type="hidden" name="ddate" id="ddate">
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" id="btnAdd">保存</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
            </form>
            <!-- 模态框（Modal）查询值班信息-->
            <form id="dutySelect" enctype="multipart/form-data">
                <div class="modal fade myModel" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="myModalLabel1">值班详情</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group" >
                                    <label >姓名：</label>
                                    <input disabled="disabled" name="dname" id="dname1"  class="form-control myModal-input">
                                </div>
                                <div class="form-group">
                                    <label >值班时间</label>
                                    <input disabled="disabled" name="ddate" id="ddate1" class="form-control myModal-input">
                                </div>
                                <div class="form-group">
                                    <label >开始时间</label>
                                    <input disabled="disabled" name="btime" id="btime1" class="form-control myModal-input">
                                </div>
                                <div class="form-group">
                                    <label >时长</label>
                                    <input  disabled="disabled" name="time" id="time1" class="form-control myModal-input">
                                </div>
                                <div class="form-group">
                                    <label >值班日志</label>
                                    <textarea  disabled="disabled" name="log" id="log1" class="form-control" rows="3"></textarea>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <!--                                <button type="button" class="btn btn-primary" id="btnAdd">保存</button>-->
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
            </form>
            <!-- 模态框（Modal）修改值班信息-->
            <form id="dutyEditFrom" enctype="multipart/form-data">
                <div class="modal fade myModel" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="myModalLabel2">值班详情</h4>
                            </div>
                            <div class="modal-body">
                                <!--      -->
                                 <input id="dno2" name="dno" type="hidden">
                                <div class="form-group" >
                                    <label for="dname2">姓名：</label>
                                    <input disabled="disabled" name="dname" id="dname2"  class="form-control myModal-input">
                                </div>
                                <div class="form-group">
                                    <label >值班日期</label>
                                    <input  disabled="disabled" name="ddate" id="ddate2" class="form-control myModal-input">
                                </div>
                                <div class="form-group">
                                    <label >开始时间</label>
                                    <input id="finalBtime"  type="hidden"name="btime"  class="form-control myModal-input">
                                    <input type="time" id="PingJieBtime" name="pjbtime">
                                </div>
                                <div class="form-group">
                                    <label >结束时间</label>
                                    <input id="finalEtime" type="hidden" name="etime"  class="form-control myModal-input">
                                    <input type="time" id="PingJieEtime" name="pjetime">
                                </div>
                                <div>
                                    <input type="hidden" id="time" name="time">
                                </div>
                                <div class="form-group">
                                    <label >值班日志</label>
                                    <textarea name="log" id="log2" class="form-control" rows="3"></textarea>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" id="btnEdit2" >保存</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
            </form>
        </div>
    </div>
</div>


<script type="text/javascript">
    //清除表中数据
    function formReset()
    {
        document.getElementById("dutyAddForm").reset()
    }
    //左边栏
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showList(1);

    });
    //模态框修改值班日志
    $("#btnEdit2").click(function (dno) {
        alert("填写后无法修改");
        var dateStr=$("#ddate2").val()
        var PingJieBtime=$("#PingJieBtime").val()
        var PingJieEtime=$("#PingJieEtime").val()

        var bh=PingJieBtime.substring(0,PingJieBtime.indexOf(":"))
        var bm=PingJieBtime.substring(PingJieBtime.indexOf(":")+1)

        var eh=PingJieEtime.substring(0,PingJieEtime.indexOf(":"))
        var em=PingJieEtime.substring(PingJieEtime.indexOf(":")+1)

        var f=PingJieBtime>PingJieEtime;
        if(f){
            layer.msg("开始时间不能在结束时间之后", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var h=eh-bh;
        var m=em-bm;
        if(m>=0&&m>=30){h=h+1}
        if(m>=0&&m<30){h=h}
        if(m<0&&m*(-1)>30){h=h-1}
        if(m<0&&m*(-1)<=30){h=h+1}
        $("#time").val(h);

        var b=dateStr+" "+PingJieBtime;
        $("#finalBtime").val(b)

        var e=dateStr+" "+PingJieEtime;
        $("#finalEtime").val(e)

        $.ajax({
            url: "/EduManage/dutyEditDo",
            type: "post",
            data:$("#dutyEditFrom").serialize(),"dno":dno,
            success: function (date) {
                if (date.result) {
                    layer.msg("保存成功", {time: 1000, icon: 4}, function () {
                        location.href = "/EduManage/dutylist";
                    });
                }
            }
        });
    });
    $("#btnSearch").click(function () {
        showList(1);
    });
    $("#btnSearchByuid").click(function () {
        showListONE(1);
    });

    //模态框保存按钮
    $("#btnAdd").click(function () {
        var dateStr=$("#PJddate").val()
        var todayStr=new Date();
        var year=todayStr.getFullYear();
        var month=todayStr.getMonth()+1;
        var date=todayStr.getDate();

        todayStr=year+"-"+month+"-"+date;
        var f=todayStr>dateStr;
        if (f) {
            layer.msg("日期不能在今天之前", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var a=dateStr+" "+"00:00"
        $("#ddate").val(a)
        $.ajax({
            url: "/EduManage/dutySaveDo",
            type: "post",
            dataType:"json",
            data:$("#dutyAddForm").serialize(),
            success: function (date) {
                if (date.result) {
                    layer.msg("保存成功", {time: 1000, icon: 4}, function () {
                        location.href = "/EduManage/dutylist";
                    });
                }
            }
        });
    });
    //查看值班日志
    function select(dno) {
        $("#dno1").val(dno),
            $.ajax({
                url:"/EduManage/edit",
                type:"post",
                data:{"dno":dno},
                success:function (data){
                    if (data.result){
                        $("#dname1").val(data.duty.dname);
                        $("#ddate1").val(data.duty.ddate);
                        $("#btime1").val(data.duty.btime);
                        $("#time1").val(data.duty.time);
                        $("#log1").val(data.duty.log);
                    }
                }
            })
    };
    //修改值班日志
    function edit(dno) {
        $("#dno2").val(dno),
            $.ajax({
                url:"/EduManage/edit",
                type:"post",
                data:{"dno":dno},
                success:function (data){
                    if (data.result){
                        $("#dname2").val(data.duty.dname);
                        $("#ddate2").val(data.duty.ddate);
                        $("#btime2").val(data.duty.btime);
                        $("#time2").val(data.duty.time);
                        $("#log2").val(data.duty.log);
                    }
                }
            })
    };
    //查询条件查询
    function showList(currentPage) {
        $.ajax({
            url: "/EduManage/dutylistDo",
            type: "post",
            data: {
                "currentPage": currentPage,
                "uid": $("#uid").val(),
                "logstate": $("#logstate").val(),
                // "btime": $("#btime").val(),
                // "etime": $("#etime").val()
            },
            success: function (data) {
                if (data.result) {
                    var str = "";
                    $.each(data.dutyList, function (index, duty) {
                        str += "<tr>";
                        str += "<td>" + (index + 1) + "</td>";
                        str += "<td>" + duty.dname + "</td>";
                        str += "<td>" + duty.ddate + "</td>";
                        str += "<td>" + duty.assigner + "</td>";
                        if (duty.btime!=null){
                            str += "<td>" + duty.btime + "</td>";
                            str += "<td>" + duty.time + "</td>";
                            str += "<td>" + duty.log + "</td>";
                        }else{
                            str += "<td>" + '未填写' + "</td>";
                            str += "<td>" + '未填写' + "</td>";
                            str += "<td>" + '未填写' + "</td>";
                        }

                        if(duty.logstate=="0"){
                            str+="<td>";
                            str += "<button type='button' class='btn btn-success btn-xs' data-toggle='modal' data-target='#myModal1' onclick='select("+duty.dno+")'><i class='glyphicon glyphicon-ok'></i>&ensp;值班日志</button>"
                            str+="</td>";
                        }if(duty.logstate=="1"){
                            str+="<td>";
                            str += "<button type='button' class='btn btn-success btn-xs'data-toggle='modal' data-target='#myModal1' onclick='select("+duty.dno+")' ><i class='glyphicon glyphicon-ok'></i>&ensp;值班日志</button>"
                            str+="</td>";
                            //    data-toggle="modal" data-target="#myModal5"
                        }
                        str += "</tr>";
                    });
                    $("#tbody").html(str);
                    var pageStr = "";
                    pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage - 1) + ')">上一页</a></li>';
                    for (var i = 1; i <= data.pageBean.countPage; i++) {
                        pageStr += '<li class="' + (data.pageBean.currentPage == i ? 'active' : '') + '"><a href="#" onclick="showList(' + i + ')">' + i + '<span class="sr-only">(current)</span></a></li>';
                    }
                    pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage ? 'disabled' : '') + '"><a href="#" onclick="showList('+(data.pageBean.currentPage==data.pageBean.countPage?data.pageBean.countPage:data.pageBean.currentPage+1)+')">下一页</a></li>';
                    $("#byPage").html(pageStr);
                }
            }
        });
    }


    function showListONE(currentPage) {
        $.ajax({
            url: "/EduManage/dutylistByUidDo",
            type: "post",
            data: {
                "currentPage": currentPage,
                "uid": $("#uid").val(),
                "logstate": $("#logstate").val(),
                // "btime": $("#btime").val(),
                // "etime": $("#etime").val()
            },
            success: function (data) {
                if (data.result) {
                    var str = "";
                    $.each(data.dutyList, function (index, duty) {
                        str += "<tr>";
                        str += "<td>" + (index + 1) + "</td>";
                        str += "<td>" + duty.dname + "</td>";
                        str += "<td>" + duty.ddate + "</td>";
                        str += "<td>" + duty.assigner + "</td>";
                        if (duty.btime!=null){
                            str += "<td>" + duty.btime + "</td>";
                            str += "<td>" + duty.time + "</td>";
                            str += "<td>" + duty.log + "</td>";
                        }else{
                            str += "<td>" + '未填写' + "</td>";
                            str += "<td>" + '未填写' + "</td>";
                            str += "<td>" + '未填写' + "</td>";
                        }
                        if(duty.logstate=="0"){
                            str+="<td>";
                            str += "<button type='button' class='btn btn-warning btn-xs' data-toggle='modal' data-target='#myModal2' onclick='edit("+duty.dno+")'><i class='glyphicon glyphicon-edit'></i>&ensp;值班日志</button>"
                            str+="</td>";
                        }if(duty.logstate=="1"){
                            str+="<td>";
                            str += "<button type='button' class='btn btn-success btn-xs'data-toggle='modal' data-target='#myModal1' onclick='select("+duty.dno+")' ><i class='glyphicon glyphicon-ok'></i>&ensp;值班日志</button>"
                            str+="</td>";
                            //    data-toggle="modal" data-target="#myModal5"
                        }
                        str += "</tr>";
                    });
                    $("#tbody").html(str);
                    var pageStr = "";
                    pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showListONE(' + (data.pageBean.currentPage - 1) + ')">上一页</a></li>';
                    for (var i = 1; i <= data.pageBean.countPage; i++) {
                        pageStr += '<li class="' + (data.pageBean.currentPage == i ? 'active' : '') + '"><a href="#" onclick="showListONE(' + i + ')">' + i + '<span class="sr-only">(current)</span></a></li>';
                    }
                    pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage ? 'disabled' : '') + '"><a href="#" onclick="showListONE('+(data.pageBean.currentPage==data.pageBean.countPage?data.pageBean.countPage:data.pageBean.currentPage+1)+')">下一页</a></li>';
                    $("#byPage").html(pageStr);
                }
            }
        });
    }
</script>
</body>
</html>